<template>
  <div>
    <a-card title="重修审批结果查询">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="学号">
          <a-input v-decorator="['studentId']" placeholder="输入学号" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-decorator="['name']" placeholder="输入姓名" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-decorator="['status']" placeholder="选择状态" style="width: 120px">
            <a-select-option value="all">全部</a-select-option>
            <a-select-option value="pending">待审核</a-select-option>
            <a-select-option value="approved">已通过</a-select-option>
            <a-select-option value="rejected">未通过</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>
      
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="{ pageSize: 10 }"
        style="margin-top: 16px"
      >
        <template slot="status" slot-scope="text">
          <a-badge :status="text === '已通过' ? 'success' : text === '待审核' ? 'processing' : 'error'" :text="text" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="viewDetail(record)">查看</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '申请编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '重修课程',
    dataIndex: 'courses',
    key: 'courses'
  },
  {
    title: '申请时间',
    dataIndex: 'applyTime',
    key: 'applyTime'
  },
  {
    title: '审批时间',
    dataIndex: 'approveTime',
    key: 'approveTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    id: 'RT20230501001',
    studentId: '20230101',
    name: '刘洋',
    courses: '高等数学(下), 大学物理(上)',
    applyTime: '2023-05-10 14:30:22',
    approveTime: '2023-05-12 09:15:33',
    status: '已通过'
  },
  {
    key: '2',
    id: 'RT20230502001',
    studentId: '20230102',
    name: '赵宇',
    courses: '线性代数',
    applyTime: '2023-05-11 09:15:33',
    approveTime: '2023-05-13 10:20:45',
    status: '已通过'
  },
  {
    key: '3',
    id: 'RT20230503001',
    studentId: '20230103',
    name: '周婷',
    courses: '电路分析, 模拟电子技术',
    applyTime: '2023-05-09 16:20:45',
    approveTime: '2023-05-11 14:10:15',
    status: '未通过'
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      columns,
      data
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          // 实际应用中这里应该是API调用
        }
      })
    },
    viewDetail(record) {
      console.log('查看详情:', record)
    }
  }
}
</script>